<template>

  <dv-border-box-8 style="padding: 10px">
    <div style="height: 500px;width: 100%;">
      <div class="number" style="margin-top: 10px">
        <el-row :gutter="20">
          <el-col :span="8">
            <span>今年累计销售额</span>
            <h2>{{ saleData.yearTotal }}</h2>
          </el-col>
          <el-col :span="8">
            <span>本月累计销售额</span>
            <h2>{{ saleData.monthTotal }}</h2>
          </el-col>
          <el-col :span="8">
            <span>今日累计销售额</span>
            <h2>{{ saleData.todayTotal }}</h2>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <span>本年累计碳排放</span>
            <h2>{{ carbonData.totalCarbonEmissionByYear }}</h2>
          </el-col>
          <el-col :span="8">
            <span>本月累计碳排放</span>
            <h2>{{ carbonData.totalCarbonEmissionByMonth }}</h2>
          </el-col>
          <el-col :span="8">
            <span>今日累计碳排放</span>
            <h2>{{ carbonData.totalCarbonEmissionByDay }}</h2>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-table :data="tableData"  :row-style="rowStyle"  class="overTable">
          <el-table-column type="index" label="编号"></el-table-column>
          <el-table-column prop="deviceName" label="设备"></el-table-column>
          <el-table-column prop="producedQuantity" label="生产数量"></el-table-column>
          <el-table-column prop="totalCarbonEmission" label="碳排放"></el-table-column>
        </el-table>
      </div>
    </div>
  </dv-border-box-8>


</template>

<script>

import {
  getSaleOverall, listDevicePowerReport,
  productPowerReportByDay,
  productPowerReportByMonth,
  productPowerReportByYear
} from "@/api/dv/carbon";

export default {
  name: "Overview",
  data(){
    return{
      interval:'',
      rowStyle:{
        color:'#eee',
        fontSize:'12px',
        height:'14px'
      },
      saleData: {},
      carbonData: {
        totalCarbonEmissionByYear: 0,
        totalCarbonEmissionByMonth: 0,
        totalCarbonEmissionByDay: 0,
      },
      tableData:[]
    }
  },
  mounted() {
    this.getData()
  },
  methods:{
    getData() {
      getSaleOverall().then(response => {
        this.saleData = response.data
      });
      productPowerReportByYear().then(response => {
        this.carbonData.totalCarbonEmissionByYear = response.rows[0].totalCarbonEmission
      });
      productPowerReportByMonth().then(response => {
        this.carbonData.totalCarbonEmissionByMonth = response.rows[0].totalCarbonEmission
      });
      productPowerReportByDay().then(response => {
        this.carbonData.totalCarbonEmissionByDay = response.rows[0].totalCarbonEmission
      });
      listDevicePowerReport({pageNum:1,pageSize: 8}).then(response => {
        this.tableData = response.rows
      });
    }
  },
}
</script>

<style lang="scss">
.number span{
  font-size: 14px;
}
h2{
  color: #1ab394;
  line-height: 1px;
  font-size: 16px;
}
/*最外层透明*/
.overTable{
  background-color: transparent;
  th.el-table__cell{
    color:#eee ;
    background-color: transparent;
  }
  tr:hover{
    color:#3E9EFF !important;
  }
}

.el-table__expanded-cell{
  background-color: transparent;
}
/* 表格内背景颜色 */
.overTable th,
.overTable tr,
.overTable td {
  background-color: transparent;
}
</style>
